<template>
	<view>
		<view class="headerWrapper" >
			
			<view class="header">
				<searchBar></searchBar>
			</view>
			
			<view class="headerNav">
				<view @click="headerNavItemIndex = 0"
							class="headerNavItem" 
							:class="{active: headerNavItemIndex === 0}" 
				>分类选型</view>
					
				<view @click="headerNavItemIndex = 1"
							class="headerNavItem" 
							:class="{active: headerNavItemIndex === 1}" 
				>品牌选型</view>
			</view>
			
		</view>
		
		<view class="typeContainer">
		
			<scroll-view class="selectBarScroll" scroll-y="true" enable-flex >
				<view class="selectBar">
					<view class="selectBarItem" 
								:class="{active: currentItemIndex === index}"
								v-for="(selectBarItem, index) in typeDetailList" 
								:key="selectBarItem.id" 
								@click="currentItemIndex = index"
					>
						{{selectBarItem.shortName}}
					</view>
				</view>
			</scroll-view>
			
			
			<scroll-view class="selectDetailScroll" scroll-y="true" enable-flex >
				<view class="selectDetail">
					
					<view class="recommend" v-if="typeDetailList[currentItemIndex].brand.length">
						<view class="recommendTitle">推荐品牌</view>
						<view class="recommendContent">
							<view class="recommendItem" v-for="brand in typeDetailList[currentItemIndex].brand" :key="brand.brandId">
								<image :src="brand.logo" mode=""></image>
							</view>
						</view>
					</view>
					
					<view class="selectDetailItemWra" v-for="detail in typeDetailChildren" :key="detail.id">
						
						<view class="selectDetailItemTitle">
							<view class="selectDetailItemTitleContent">{{detail.name}}</view>
							<view class="more">全部  ></view>
						</view>
						
						<view class="selectDetailItemList">
							<view class="selectDetailItem" 
										v-for="(item, index) in detail.childrens"
										:key="item.id"
										:class="{oddLast: detail.childrens.length % 2 !== 0 && index === detail.childrens.length - 1}"
							>{{item.name}}</view>
						</view>
						
					</view>
					
				</view>
			</scroll-view>
		
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import searchBar from '../components/searchBar/searchBar.vue'
	export default {
		name: 'Type',
		data() {
			return {
				currentItemIndex: 0,
				headerNavItemIndex: 0
			}
		},
		components: {
			searchBar
		},
		mounted() {
			this.getTypeDetailList()
		},
		methods: {
			getTypeDetailList() {
				this.$store.dispatch('typeDetail/getTypeDetailList')
			},
			changeHeaderNavItemIndex(index) {
				console.log(1111)
				// this.headerNavItemIndex = index
			}
		},
		computed: {
			...mapState('typeDetail', ['typeDetailList']),
			currentItemId: {
				get() {
					return (this.typeDetailList[this.currentItemIndex] || {}).id || -1
				},
				set(val) {
					this.currentItemIndex = val
				}
			},
			typeDetailChildren() {
				return (this.typeDetailList[this.currentItemIndex] || {}).childrens || []
			},
			
		}
	}
</script>

<style lang="less">
	.headerWrapper {
		position: relative;
		height: 170upx;
		background-color: #F03A58;
		display: flex;
		flex-direction: column;
		.header {
			position: fixed;
			left: 0;
			top: 0;
			height: 170upx;
		}
		.headerNav {
			position: absolute;
			left: 0;
			bottom: 12upx;
			display: flex;
			justify-content: space-around;
			width: 100%;
			color: #fff;
			background-color: #F03A58;
			.headerNavItem {
				padding-bottom: 12upx;
				font-size: 28upx;
			}
			.headerNavItem.active {
				border-bottom: 4upx solid #fff;
			}
		}
	}
	
	
	
	.typeContainer {
		height: 100%;
		display: flex;
		
		.selectBarScroll {
			height: calc(100vh - 170upx);
			display: flex;
			flex-direction: column;
			background-color: #F2F2F2;
			
			.selectBar {
				width: 210upx;
				.selectBarItem {
					height: 100upx;
					text-align: center;
					line-height: 100upx;
					font-size: 28upx;
				}
				.selectBarItem.active {
					background-color: #fff;
					color: red;
					border-left: 4upx solid red;
					box-sizing: border-box;
				}
			}
			
		}
		
		.selectDetailScroll {
			height: calc(100vh - 170upx);
			display: flex;
			flex-direction: column;
			
			.selectDetail {
				width: 540upx;
				padding-top: 20upx;
				background-color: #fff;
				
				.recommend {
					background-color: #fff;
					.recommendTitle {
						font-size: 28upx;
						height: 60upx;
						padding-left: 20upx;
						line-height: 60upx;
					}
					.recommendContent {
						display: flex;
						flex-wrap: wrap;
						.recommendItem {
							background-color: #F2F2F2;
							padding: 9upx 16upx;
							margin: 0 35upx 9upx 35upx;
						}
						image {
							width: 166upx;
							height: 64upx;
						}
					}
				}
				
				.selectDetailItemWra {
					
					.selectDetailItemTitle {
						display: flex;
						font-size: 28upx;
						justify-content: space-around;
						height: 90upx;
						line-height: 90upx;
						background-color: #fff;
						.selectDetailItemTitleContent {
							
						}
						.more {
							color: #888;
						}
					}
					
					.selectDetailItemList {
						display: flex;
						flex-wrap: wrap;
						color: #888;
						justify-content: space-around;
						.selectDetailItem {
							width: 49%;
							height: 56upx;
							border: 2upx solid #e6e6e6;
							background-color: #F2F2F2;
							margin: -2upx;
							text-align: center;
							line-height: 56upx;
							font-size: 24upx;
						}
						.selectDetailItem.oddLast {
							width: 99%;
						}
					}
					
				}
			}
			
		}
	}
</style>